﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="CSS/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
    <link href="CSS/jquery.mine.css" rel="stylesheet" type="text/css" />
    <link href="CSS/Default.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.6.2.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
    <script src="Scripts/CJL.0.1.min.js" type="text/javascript"></script>
    <script src="Scripts/ImageTrans.js" type="text/javascript"></script>
    <script src="Scripts/ToolBox.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="dlgUpload" style="display:none;" title="Upload your picture( Size<5MB max)!">
        <table>
            <tr>
                <td>
                    <asp:FileUpload ID="FileUpload1" Width="360" Height="25" size="50" 
                        style="margin-top:23px" runat="server"/>
                </td>
                <td align="right">
                    <asp:ImageButton ID="ImageButton1" onclick="btnUpload_Click" style="margin-top:23px; padding-left:6px;" runat="server" ImageUrl="Images/w_btnUpload02.gif" />
                </td>
            </tr>
        </table>
        
        
    </div>
    <div id="divUploadArea">
        <input type="button" id="btnToUpload" style="display:none;"   value=" 上传图片 " />
        <%--<asp:Button ID="btnUpload" style="display:none;" onclick="btnUpload_Click" runat="server" />--%>
        
        <input type="button" id="btnTest" style="display:none;" value=" Test " />

        <asp:HiddenField ID="hidSourceFileName" runat="server" />
        <asp:HiddenField ID="hidSourceFilePath" runat="server" />
        <asp:HiddenField ID="hidSourceWidth" runat="server" />
        <asp:HiddenField ID="hidSourceHeight" runat="server" />
        <asp:HiddenField ID="hidEditMainWidth" runat="server" />
        <asp:HiddenField ID="hidEditMainHeight" runat="server" />

        <asp:HiddenField ID="hidAngle" runat="server" />
        <asp:HiddenField ID="hidSX" runat="server" />
        <asp:HiddenField ID="hidSY" runat="server" />
        <asp:HiddenField ID="hidCutX" runat="server" />
        <asp:HiddenField ID="hidCutY" runat="server" />
        <asp:HiddenField ID="hidCutWidth" runat="server" />
        <asp:HiddenField ID="hidCutHeight" runat="server" />
        <asp:HiddenField ID="hidIsCut" runat="server" />
        <asp:HiddenField ID="hidIsPopupOnload" runat="server" />
        <asp:HiddenField ID="hidImgX" runat="server" />
        <asp:HiddenField ID="hidImgY" runat="server" />
        <asp:HiddenField ID="hidImgWidth" runat="server" />
        <asp:HiddenField ID="hidImgHeight" runat="server" />
        
        
    </div>
    <div style="text-align:center;">
    <asp:PlaceHolder ID="divSmallSource" Visible="false" runat="server" >
        <asp:HyperLink ID="lnkShowEarliest" Target="_blank" runat="server">
            <asp:Image ID="imgSmallSource" BorderWidth="0" runat="server" />
        </asp:HyperLink>
        <p style="text-align:center;">
            
            <asp:Button ID="btnToEdit" Text=" 编 辑 " OnClick="btnToEdit_Click" runat="server"></asp:Button>
        </p>
    </asp:PlaceHolder></div>
    <div id="divCustomContainer" style="width:520px;">
    <div id="divEditContainer">
        <div id="divEditMain" class="divEditMain"></div>
        <div id="divEditTools">
            <div id="divEditToolsUp">
                <a href="javascript:void(0);" id="btnLeft"></a>
                <a href="javascript:void(0);" id="btnRight"></a>
                <a href="javascript:void(0);" id="btnZoomIn"></a>
                <a href="javascript:void(0);" id="btnZoomOut"></a>
                <a href="javascript:void(0);" id="btnVertical"></a>
                <a href="javascript:void(0);" id="btnHorizontal"></a>
                <a href="javascript:void(0);" id="btnCut"></a>
                <a href="javascript:void(0);" id="btnSource"></a>
                <a href="javascript:void(0);" id="btnCancel"></a>
            </div>
            <div id="divEditToolsDown">
                <a href="javascript:void(0);" id="btnSave"></a>
                <asp:Button ID="btnToSave" OnClientClick="javascript:return SetServerValue();" onclick="btnToSave_Click" style="display:none;" runat="server" />
                <asp:Button ID="btnToCut" OnClientClick="javascript:return SetServerValue();" onclick="btnToCut_Click"  style="display:none;" runat="server" />
                <asp:Button ID="btnToReset" onclick="btnToReset_Click"  style="display:none;" runat="server" />
                <asp:Button ID="btnToDelete" onclick="btnToDelete_Click" style="display:none;" runat="server" />
            </div>
        </div>
    </div>
    
    </div>
    <div style="font-size:20px;">
        <asp:Label ID="label1" Text="大图:" runat="server" style="display:none;"></asp:Label>
        <asp:Label ID = "lblEl" runat="server" style="display:none;"></asp:Label>
        <br />
        <asp:Label ID="label2" Text="小图:" runat="server" style="display:none;"></asp:Label>
        <asp:Label ID = "lblSmall" runat="server" style="display:none;"></asp:Label>
    </div>
    </form>
</body>
</html>
<script language="javascript" type="text/javascript">
    var popupWidth = 500;
    var popupHeight = 150;
    var objImageTrans;
    var _divUploadArea, _divEditContainer, _divEditMain, _divEditTools, _divEditToolsUp, _divEditToolsDown, _divCutRectangle;
    var _hidSourceFilePath, _hidSourceFileName, _hidSourceWidth, _hidSourceHeight, _hidEditMainWidth, _hidEditMainHeight, _hidAngle, _hidSX, _hidSY, _hidCutX, _hidCutY, _hidCutWidth, _hidCutHeight, _hidIsCut, _hidIsPopupOnload;
    var _hidImgX, _hidImgY, _hidImgWidth, _hidImgHeight;
    var isLockImage = false;
    var _myScale = 0;

    $(function () {
        _divUploadArea = $("#divUploadArea");
        _divEditContainer = $("#divEditContainer");
        _divEditMain = $("#divEditMain");
        _divEditTools = $("#divEditTools");
        _divEditToolsUp = $("#divEditToolsUp");
        _divEditToolsDown = $("#divEditToolsDown");
        _divCutRectangle = $("<div id=\"divCutRectangle\" title=\"Please double click to capture screenshot\"></div>");

        _hidSourceFilePath = $("#hidSourceFilePath");
        _hidSourceFileName = $("#hidSourceFileName");
        _hidSourceWidth = $("#hidSourceWidth");
        _hidSourceHeight = $("#hidSourceHeight");
        _hidEditMainWidth = $("#hidEditMainWidth");
        _hidEditMainHeight = $("#hidEditMainHeight");
        _hidAngle = $("#hidAngle");
        _hidSX = $("#hidSX");
        _hidSY = $("#hidSY");
        _hidCutX = $("#hidCutX");
        _hidCutY = $("#hidCutY");
        _hidCutWidth = $("#hidCutWidth");
        _hidCutHeight = $("#hidCutHeight");
        _hidIsCut = $("#hidIsCut");
        _hidIsPopupOnload = $("#hidIsPopupOnload");
        _hidImgX = $("#hidImgX");
        _hidImgY = $("#hidImgY");
        _hidImgWidth = $("#hidImgWidth");
        _hidImgHeight = $("#hidImgHeight");

        $("#dlgUpload").dialog({
            autoOpen: false,
            width: popupWidth,
            height: popupHeight,
            modal: false,
//            buttons: [
//                {
//                    text: "确认并上传",
//                    click: function () {
//                        $(this).dialog("close");
//                        $("#btnUpload").trigger("click");
//                    }
//                }
//            ],
            open: function () {
                $("body>div[role=dialog]").appendTo("/html/body/form[0]");
            }
        });

        LoadEditImage();

        //Some Events

        //$("#btnToUpload").click(function (e) {  
            $(document).ready(function (e) { 
            var _src = _hidSourceFilePath.val() + _hidSourceFileName.val();
            
            if (_src != "") 
            {
                _hidIsPopupOnload.val("1");
//                if (confirm("是否保存当前图片?")) {
//                    $("#btnToSave").trigger("click");
//                } else {
//                    $("#btnToDelete").trigger("click");
//                }
            } else 
            {
                _hidIsPopupOnload.val("0");
                $("#dlgUpload").dialog("open");
            }
        });
        $("#btnLeft").click(function (e) {
            objImageTrans.left();
        });
        $("#btnRight").click(function (e) {
            objImageTrans.right();
        });
        $("#btnZoomIn").click(function (e) {
            if (Math.max(objImageTrans._x, objImageTrans._y) <= 2) {
                 objImageTrans.zoomin();
            }
        });
        $("#btnZoomOut").click(function (e) {
         if (Math.min(Math.abs(objImageTrans._x), Math.abs(objImageTrans._y)) >= 0.2) {
               objImageTrans.zoomout();
            }
        });
        $("#btnVertical").click(function (e) {
            
            objImageTrans.vertical();
        });
        $("#btnHorizontal").click(function (e) {
            objImageTrans.horizontal();
        });
        $("#btnCut").click(function (e) {
            DisplayCutRectangle(true);
        });
        $("#btnSource").click(function (e) {
            $("#btnToReset").trigger("click");
        });
        $("#btnSave").click(function (e) {
            $("#btnToSave").trigger("click");
        });
        $("#btnCancel").click(function (e) {
            _hidIsPopupOnload.val("0");
            $("#btnToDelete").trigger("click");
        });
        _divCutRectangle.dblclick(function (e) {
            $("#btnToCut").trigger("click");
        });

        $(document).keypress(function (e) {
            var v = BrowserWhich(false);
            if ((e.which == 27 && v == "ie") || (e.which == 0 && v == "firefox")) {
                DisplayCutRectangle(false);
            }
        });
    });

    function LoadEditImage() {
        var options = {
            onPreLoad: function () { _divEditMain.css({ "background-image": "url('Images/loading.gif')", "background-repeat": "no-repeat" }) },
            onLoad: function () {
                _divEditMain.css("backgroundImage", "");
            },
            mouseRotate: false,
            mouseZoom: false
        };
        var _src = _hidSourceFilePath.val() + _hidSourceFileName.val();
        if (_src != "") {
            DisplayEditArea(true);
            objImageTrans = new ImageTrans("divEditMain", options);
            objImageTrans.load(_src + ".jpg?" + Math.random());
            _divEditMain.append(_divCutRectangle);
            _divCutRectangle.draggable({
                containment: "#divEditMain"
            }).resizable({
                maxHeight: 420,
                aspectRatio: <%=CutaspectRatio %>,
                disabled: <%=CutResizeDisabled %>
            });
            _divCutRectangle.width(<%=CutSizeWidth %>);
            _divCutRectangle.height(<%=CutSizeHeight %>);
            //DisplayCutRectangle(false);
            var isCutOne = <%=IsCutYOrN %>
            if(isCutOne=="1")
            {
                DisplayCutRectangle(false);
            }
            else
            {
                DisplayCutRectangle(true);
            }
            
        } else {
            DisplayEditArea(false);
            
        }
    }
    function InitdivEditMainPosition() {
        var _img = $("#divEditMain img").eq(0);
        _divEditMain.css({
            "margin-left": parseInt((_divEditContainer.width() - _img.width()) / 2) + "px"
        });
    }
    function DisplayEditArea(isDo) {
        if (isDo) {
            //$("#btnToUpload").hide();
            _divEditContainer.show();
            _divEditMain.show();
            _divEditTools.show();
            
        } else {
            //$("#btnToUpload").show();
            _divEditContainer.hide();
            _divEditMain.hide();
            _divEditTools.hide();
            _divCutRectangle.hide();
        }
    }
    function DisplayCutRectangle(isDo) {
        if (isDo) {
            
            _divCutRectangle.show();
            var _w = _divCutRectangle.width();
            var _h = _divCutRectangle.height();
            _divCutRectangle.css({
                left: parseInt(_divEditMain.width() / 2 - _w / 2),
                top: parseInt(_divEditMain.height() / 2 - _h / 2)
            });
            //_divCutRectangle.draggable("enable");
            //_divCutRectangle.resizable("enable");
            
        } else {
            _divCutRectangle.hide();
            //_divCutRectangle.draggable("disable");
            //_divCutRectangle.resizable("disable");
        }
        _hidIsCut.val(isDo ? 1 : 0);
    }

    //-----------------------------------------
    //Submit to Server
    function SetServerValue() {
        var angle = objImageTrans._radian * 180 / Math.PI;
        var objX = objImageTrans._x;
        var objY = objImageTrans._y;
        var cutP = _divCutRectangle.position();
        var cutW = _divCutRectangle.width();
        var cutH = _divCutRectangle.height();
        _hidAngle.val(angle);
        _hidSX.val(objY);
        _hidSY.val(objX);
        _hidCutX.val(_divCutRectangle.get(0).offsetLeft);
        _hidCutY.val(_divCutRectangle.get(0).offsetTop);
        _hidCutWidth.val(cutW);
        _hidCutHeight.val(cutH);
        _hidEditMainWidth.val(_divEditMain.width());
        _hidEditMainHeight.val(_divEditMain.height());
        var _img = $("#divEditMain img").eq(0);
        var imgPosition = _img.position();
        _hidImgX.val(imgPosition.left < 0 ? 0 : parseInt(imgPosition.left));
        _hidImgY.val(imgPosition.top < 0 ? 0 : parseInt(imgPosition.top));
        _hidImgWidth.val(_img.width());
        _hidImgHeight.val(_img.height());

        return true;
    }

    //-----------------------------------------
    //Submit Popup
    function submitPopup(popupName) {
        closePopup(popupName);
        $("#btnOK").trigger("click");
    }

    //-----------------------------------------
    //Testing...
    $(function () {
        $("#btnTest").click(function (e) {
            Test(e);
        });
    });
    function Test(e) {
        var angle = objImageTrans._radian * 180 / Math.PI;
        var objX = objImageTrans._x;
        var objY = objImageTrans._y;
        var p = _divCutRectangle.position();
        var w = _divCutRectangle.width();
        var h = _divCutRectangle.height();
        //InitdivEditMainPosition();

        var _img = $("#divEditMain img").eq(0);
        var imgPosition = _img.position();
        var imgWidth = _img.width();
        var imgHeight = _img.height();
        var imgLeft = imgPosition.left;
        var imgTop = imgPosition.top;
    }
</script>
